class AcGamePlayground {
    constructor(root) {
        this.root = root;
        this.$playground = $(`
<div class="ac-game-playground"></div>
`);
        // 调试游戏界面时，直接显示游戏界面，不需要隐藏
        // 调试完毕，在进入游戏时，首先需要将游戏界面隐藏
        this.hide();

        // 由于可能多次调用show函数，
        // 但是不可能多次将playground对象append到ac_game中
        // 所以需要改变append操作的位置
        this.root.$ac_game.append(this.$playground);

        this.start();
    }

    // 随机获取颜色
    get_random_color() {
        let colors = ["blue", "red", "pink", "grey", "green", "yellow", "purple", "pink", "brown"];
        return colors[Math.floor(Math.random() * colors.length)];
    }

    start() {
        let outer = this;
        // 当窗口大小变化时要调用我们自己实现的resize函数
        $(window).resize(function() {
            outer.resize();
        });
    }

    resize() {
        this.width = this.$playground.width();
        this.height = this.$playground.height();
        // why?
        let unit = Math.min(this.width / 16, this.height / 9);
        this.width = unit * 16;
        this.height = unit * 9;
        // 在后面将绝对坐标转为相对坐标中使用
        this.scale = this.height;

        // 如果地图存在，那么需要将地图resize
        if (this.game_map)
            this.game_map.resize();
    }

    // 显示playground
    show(mode) {
        let outer = this;
        this.$playground.show();
        // 按照逻辑，游戏界面的初始化，敌人的生成都应放在游戏界面显示出来后进行
        // 而不是在游戏界面没有显示的时候就进行初始化
        // 将创建的div元素添加到原对象中的$ac_game中
        // 获取游戏界面的宽度和高度
        this.width = this.$playground.width();
        this.height = this.$playground.height();
        // 创建一个AcGameMap对象
        // 传入this表示将AcGamePlayground对象传入AcGameMap对象
        this.game_map = new GameMap(this);

        this.mode = mode;
        this.state = "waiting";     // waiting -> fighting -> over
        this.notice_board = new NoticeBoard(this);
        this.player_count = 0;

        this.resize();

        // 创建一个AcGamePlayer对象
        // 并将其保存到players数组中
        this.players = [];
        // 将绝对坐标转为相对坐标
        this.players.push(new Player(this, this.width / 2 / this.scale, this.height / 2 / this.scale, this.height * 0.05 / this.scale, "white", this.height * 0.15 / this.scale, "me", this.root.settings.username, this.root.settings.photo));

        if (mode === "single mode") {
        // 随机创建4个玩家
            for (let i = 0; i < 5 ; i ++) {
                // 将绝对坐标转为相对坐标
                this.players.push(new Player(this, this.width / 2 / this.scale, this.height / 2 / this.scale, this.height * 0.05 / this.scale, this.get_random_color(), this.height * 0.15 / this.scale, "robot"));
            }
        } else if (mode === "multi mode") {
            this.chat_field = new ChatField(this);
            this.mps = new MultiPlayerSocket(this);
            this.mps.uuid = this.players[0].uuid;

            this.mps.ws.onopen = function() {
                outer.mps.send_create_player(outer.root.settings.username, outer.root.settings.photo);
            };
        }
    }

    // 隐藏playground
    hide() {
        this.$playground.hide();
    }
}

